<template>
  <el-dialog
    v-model="visible"
    title="生成图文卡片"
    width="500px"
    :close-on-click-modal="true"
    :show-close="false"
  >
    <div class="content">
      <div class="steps">
        <div class="step-item">
          <div class="step-title highlight-bg">
            苹果手机 > 抖音APP扫码 > 页面右上角转发至聊天
          </div>
          <div class="qrcode-container">
            <el-image
              :src="qrcodeUrl"
              fit="contain"
              class="qrcode-image"
              v-loading="loading"
            />
          </div>
        </div>
        
        <div class="step-item">
          <div class="link-container">
            <el-tooltip
              :content="cardData?.enCodeUrl"
              placement="top"
              :show-after="500"
            >
              <span class="link-text">{{ truncateUrl(cardData?.enCodeUrl) }}</span>
            </el-tooltip>
            <el-button type="primary" link @click="copy(cardData?.enCodeUrl)">
              <Icon icon="ep:copy-document" class="mr-5px" /> 复制链接
            </el-button>
          </div>
        </div>

        <div class="tips">
          <p class="tip-item">
            必须是<span class="highlight-text">苹果手机</span>，务必使用<span class="highlight-text">抖音APP</span>扫码
          </p>
          <p class="tip-item">
            制作成功后，可点击<span class="highlight-text">页面右上角的转发按钮</span>分享
          </p>
          <p class="tip-item">
            至聊天，将以卡片形式发送给好友
          </p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Icon } from '@/components/Icon'
import { LinkCardApi } from '@/api/system/linkcard'

const visible = ref(false)
const loading = ref(false)
const cardData = ref<any>(null)
const qrcodeUrl = ref('')

const truncateUrl = (url: string) => {
  if (!url) return ''
  const maxLength = 30
  if (url.length <= maxLength) return url
  return url.substring(0, maxLength) + '...'
}

const open = async (row: any) => {
  cardData.value = row
  loading.value = true
  try {
    // 调用接口生成二维码
    const blob = await LinkCardApi.getLinkCardQRCode(row.adLinkCardId)
    // 将Blob转换为URL
    qrcodeUrl.value = URL.createObjectURL(blob)
  } catch (error) {
    ElMessage.error('生成二维码失败')
  } finally {
    loading.value = false
  }
  visible.value = true
}

const copy = (text: string) => {
  if (!text) return
  navigator.clipboard.writeText(text)
  ElMessage.success('已复制到剪贴板')
}

// 组件销毁时释放URL对象
onUnmounted(() => {
  if (qrcodeUrl.value) {
    URL.revokeObjectURL(qrcodeUrl.value)
  }
})

defineExpose({ open })
</script>

<style scoped>
.content {
  padding: 20px;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.step-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.step-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  text-align: center;
}

.highlight-bg {
  background-color: #f0f9eb;
  padding: 12px;
  border-radius: 4px;
  color: #67c23a;
  font-weight: 500;
}

.qrcode-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.qrcode-image {
  width: 300px;
  height: 300px;
}

.link-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.link-text {
  flex: 1;
  word-break: break-all;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tips {
  margin-top: 20px;
  padding: 15px;
  border-radius: 4px;
  width: 100%;
}

.tip-item {
  margin: 8px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.highlight-text {
  color: #409eff;
  font-weight: 500;
}
</style>
